<template>
	<view class="content">
		<view class="btn" @click="btn" v-if="current==2">
			立即开启
		</view>
	<view class="index-swiper">
		<uni-swiper-dot :info="info" :current="current"  mode="round" class="swiper"  :dotsStyles="dotsStyles" >
			<swiper  @change="change" v-if="info.length>0"  style="width: 100vw;height: 100vh;">
				<swiper-item v-for="(item, index) in info" :key="index" class="swiper-item" >
					<view  style="width: 100%;height: 100%;  background-color:#FFFFFF; display: flex; align-items: center;">
						<image  v-if="item.image" :src="item.image" class="swiper-img" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>

	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue';
	export default {
		data() {
			return {
				bol:false,
				current: 0, //轮播图的索引下标
				round:'round',
				info: [
					{ image: '../../../static/guide1.png' },
					{ image: '../../../static/guide2.png' },
					{ image: '../../../static/guide3.png' },
				],
				dotsStyles:{
					bottom:100,
					backgroundColor:' #D8D8D9',
					selectedBackgroundColor:'#3C8EFF',
					width:15,
					height:15,
				},
			}
		},
		components: {
			uniSwiperDot,
		},
		onShow(){
		},
		// 自定义返回事件必须要添加return true 要不然自定义事件不生效!!!
		onBackPress() {
			console.log(this.noReturn,'点击了返回事件------------');
			return true
		},
		methods: {
			btn(){
				uni.reLaunch({
					url:'../../tabbars/index/index'
				})
			},
			moveTo(){
				console.log(1111111111)
				
			},
			// 切换轮播图
			change(e) {
				this.current = e.detail.current;

			},
		},	
	}
</script>

<style lang="scss" scoped>
	.content{
		width:100vw;
		height:100vh;
	}
	.btn{
		width: 248rpx;
		height: 80rpx;
		background: #3C8EFF;
		border-radius: 40rpx;
		line-height:80rpx;
		text-align:center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		position:fixed;
		right:250rpx;
		bottom:10%;
		z-index:100;
		transtion:all 1s;
	}
	.index-swiper {
		height: 100vh;
		width: 100vw;
		position: absolute;
		z-index: 1;
		.swiper-box {
			width: 100vw;
			height: 100vh;
			.swiper-img {
				width: 100vw;
				height: 100vh;
				border-radius: 8rpx;
			}
		}
	}
	.swiper{
		width:100vw;
		height:100vh;
	}
	.swiper-item{
		width:100vh;
		height:100vh;
		background-color:#04be02;
		display:flex;
		align-item:center;
	}
	
</style>
